
import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

import { Button, Divider } from 'antd-mobile'

import { jumpTo } from '../../utils/jump'

import styles from './index.module.css'

function Main() {
    //导航
    const navigate = useNavigate()

    //[]空数组相当于componentDidMount
    useEffect(() => {

        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    function clickReport() {
        jumpTo(navigate, '/report', false, null)
    }

    function clickHistory() {
        jumpTo(navigate, '/history', false, null)
    }

    function clickImageUploader() {
        jumpTo(navigate, '/imagePick', false, null)
    }
    function clickWeChatJS() {
        jumpTo(navigate, '/demo01', false, null)
    }
    function clickFileUploader() {
        jumpTo(navigate, '/fileUploader', false, null)
    }

    return (
        <div >
            <Button onClick={clickReport} block color='primary' size='large'>
                report
            </Button>
            <Divider />
            <Button onClick={clickHistory} block color='primary' size='large'>
                history
            </Button>
            <Divider />
            <Button onClick={clickImageUploader} block color='primary' size='large'>
                imageUploader
            </Button>
            <Divider />
            <Button onClick={clickWeChatJS} block color='primary' size='large'>
                wechat-js
            </Button>
            <Divider />
            <Button onClick={clickFileUploader} block color='primary' size='large'>
                FileUploader
            </Button>
        </div>
    )
}

export default Main;
